<script src="__CDN__/assets/addons/tang/vue2.js?v={$site.version|htmlentities}"></script>
<link rel="stylesheet" href="__CDN__/assets/addons/tang/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/tang/index.css">
<script src="__CDN__/assets/addons/tang/element.js?v={$site.version|htmlentities}"></script>
<div id="app" class="dashboard_debox2" v-cloak>
    <div class="inner">
        <el-row>
            <el-col :span="24">
                <div class="show_content">
                    <div class="de_ti">销售报表</div>
                    <div class="chose_time">
                        <el-date-picker  :picker-options="pickerOptions" v-model="time1" type="daterange" @change="getData" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <div class="show_data_list4">
                        <div class="item">
                            <div class="con">
                                <p class="p1">{$result.order.order_avg_price}</p>
                                <p class="p2">平均订单价</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="con">
                                <p class="p1">{$result.order.order_avguser_price}</p>
                                <p class="p2">平均客单价</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="con">
                                <p class="p1">{$result.order.num}</p>
                                <p class="p2">订单数量</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="con">
                                <p class="p1">{$result.order.price}</p>
                                <p class="p2">下单金额</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="con">
                                <p class="p1">{$result.order.yunfei}</p>
                                <p class="p2">配送金额</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="con">
                                <p class="p1">{$result.order.tui_price}</p>
                                <p class="p2">退货金额</p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="padding:0 20px;">
            <el-col :span="12" :xs="24">
                <div class="show_content show_content2">
                    <div class="de_ti2">用户</div>
                    <div class="show_data_list5">
                        <div class="item">
                            <div class="con">
                                <p class="p1">用户数量</p>
                                <p class="p2">{$result.user_num}</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="con">
                                <p class="p1">未下单人数</p>
                                <p class="p2">{$result.user_nopay}</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="con">
                                <p class="p1">已下单人数</p>
                                <p class="p2">{$result.user_pay}</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="con">
                                <p class="p1">下单占比</p>
                                <p class="p2">{$result.user_zhanbi}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="de_ti2">商品</div>
                    <div class="show_data_list5">
                        <div class="item">
                            <div class="con">
                                <p class="p1">商品数量</p>
                                <p class="p2">{$result.goods_num}</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="con">
                                <p class="p1">未下单数量</p>
                                <p class="p2">{$result.goods_nopay}</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="con">
                                <p class="p1">已下单数量</p>
                                <p class="p2">{$result.goods_pay}</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="con">
                                <p class="p1">下单占比</p>
                                <p class="p2">{$result.goods_zhanbi}%</p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12" :xs="24">
                <div class="show_content show_content2">
                    <div id="line-chart1" style="position: relative; height: 300px;"></div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="padding:0 20px;">
            <el-col :span="8" :xs="24">
                <div class="show_content show_content2">
                    <div class="de_ti">商品TOP5</div>
                    <div class="de_tbale">
                        <div id="line-chart2" style="position: relative; height: 300px;"></div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8" :xs="24">
                <div class="show_content show_content2">
                    <div class="de_ti">用户TOP5</div>
                    <div class="de_tbale">
                        <div id="line-chart3" style="position: relative; height: 300px;"></div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8" :xs="24">
                <div class="show_content show_content2">
                    <div class="de_ti">各大类占比</div>
                    <div class="de_tbale">
                        <div id="line-chart4" style="position: relative; height: 300px;"></div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</div>